﻿<form class="horizontal-form" autocomplete="off">
    <div class="m-form m-form--label-align-right">
        <div class="row align-items-center m--margin-bottom-10">
            <div class="col-xl-12">
                <div class="form-group m-form__group align-items-center">
                    <div class="input-group">
                        <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                            [placeholder]="l('SearchWithThreeDot')" type="text">
                        <span class="input-group-btn">
                            <button (click)="getRequirementItems()" class="btn btn-primary" type="submit"><i
                                    class="flaticon-search-1" [attr.aria-label]="l('Search')"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="row margin-bottom-10">
    <div class="col-xl-6">
        <p>需求包详细列表</p>
    </div>
    <div class="col-xl-6 text-right">
        <button *ngIf="requirementPackage.state == 0" class="btn btn-primary" (click)="createOrEditRequirementItem()"><i
                class="fa fa-edit"></i>新增需求</button>
    </div>
</div>
<div class="row">
    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
        <p-table #dataTable (onLazyLoad)="getRequirementItems($event)" [value]="primengTableHelper.records"
            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
            [resizableColumns]="primengTableHelper.resizableColumns">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 130px"
                        [hidden]="!isGrantedAny('Pages.StandardPartsManager.Requirement', 'Pages.StandardPartsManager.Requirement.Edit', 'Pages.StandardPartsManager.Requirement.Delete')">
                        {{'Actions' | localize}}
                    </th>
                    <th style="width: 50px;text-align: center;">
                        序号
                    </th>
                    <th style="width: 100px;text-align: center;">
                        车间
                    </th>
                    <!--
                        <th style="width: 150px">
                            型号
                        </th>
                        <th style="width: 150px">
                            发次
                        </th>
                        <th style="width: 150px">
                            部段
                        </th> 
                    -->
                    <th style="width: 100px;text-align: center;">
                        编码
                    </th>
                    <th style="width: 150px;text-align: center;">
                        名称
                    </th>
                    <th style="width: 100px;text-align: center;">
                        分类
                    </th>
                    <th style="width: 100px;text-align: center;">
                        标准
                    </th>
                    <th style="width: 100px;text-align: center;">
                        规格
                    </th>
                    <th style="width: 100px;text-align: center;">
                        材料
                    </th>
                    <th style="width: 100px;text-align: center;">
                        型号需求数量
                    </th>
                    <th style="width: 100px;text-align: center;">
                        工艺余量
                    </th>
                    <th style="width: 150px;text-align: center;">
                        型号需求时间
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                <tr>
                    <td style="width: 130px"
                        [hidden]="!isGrantedAny('Pages.StandardPartsManager.Requirement', 'Pages.StandardPartsManager.Requirement.Edit', 'Pages.StandardPartsManager.Requirement.Delete')">
                        <div class="btn-group dropdown" dropdown container="body">
                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                <i class="fa fa-cog"></i><span class="caret"></span> {{"Actions" | localize}}
                            </button>
                            <ul class="dropdown-menu" *dropdownMenu>
                                <li
                                    *ngIf="('Pages.StandardPartsManager.Requirement' | permission) && requirementPackage.state != 0">
                                    <a href="javascript:;" (click)="createOrEditRequirementItem(record)">查 看</a>
                                </li>
                                <li
                                    *ngIf="('Pages.StandardPartsManager.Requirement.Edit' | permission) && requirementPackage.state == 0 ">
                                    <a href="javascript:;" (click)="createOrEditRequirementItem(record)">编 辑</a>
                                </li>
                                <li
                                    *ngIf="('Pages.StandardPartsManager.Requirement.Delete' | permission) && requirementPackage.state == 0 ">
                                    <a href="javascript:;" (click)="deleteRequirementItems(record)">删 除</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                    <td style="width: 50px;text-align: center;">
                        <span class="ui-column-title">序号</span>
                        {{rowIndex + 1}}
                    </td>
                    <td style="width: 100px;text-align: center;">
                        <span class="ui-column-title">车间</span>
                        {{record.usableRange.unitOfUsing}}
                    </td>
                    <!--
                        <td style="width: 150px">
                            <span class="ui-column-title">型号</span>
                            {{record.usableRange.belongToModel}}
                        </td>
                        <td style="width: 150px">
                            <span class="ui-column-title">发次</span>
                            {{record.usableRange.batch}}
                        </td>
                        <td style="width: 150px">
                            <span class="ui-column-title">部段</span>
                            {{record.usableRange.belongToComponent}}
                        </td>
                    -->
                    <td style="width: 100px;text-align: center;">
                        <span class="ui-column-title">编码</span>
                        {{record.serialNumber}}
                    </td>
                    <td style="width: 150px;text-align: center;">
                        <span class="ui-column-title">名称</span>
                        {{record.features.displayName}}
                    </td>
                    <td style="width: 100px;text-align: center;">
                        <span class="ui-column-title">分类</span>
                        {{getStandarType(record.standardType)}}
                    </td>
                    <td style="width: 100px;text-align: center;">
                        <span class="ui-column-title">标准</span>
                        {{record.features.standardNumber}}
                    </td>
                    <td style="width: 100px;text-align: center;">
                        <span class="ui-column-title">规格</span>
                        {{record.features.specification}}
                    </td>
                    <td style="width: 100px;text-align: center;">
                        <span class="ui-column-title">材料</span>
                        {{record.features.materials}}
                    </td>
                    <td style="width: 100px;;text-align: center;">
                        <span class="ui-column-title">型号需求数量</span>
                        {{record.requiredQuantityOfModel}}
                    </td>
                    <td style="width: 100px;;text-align: center;">
                        <span class="ui-column-title">工艺余量</span>
                        {{record.marginOfCrafts}}
                    </td>
                    <td style="width: 150px;text-align: center;">
                        <span class="ui-column-title">型号需求时间</span>
                        {{record.requiredTimeOfModel | date:'yyyy-MM-dd'}}
                    </td>
                </tr>
            </ng-template>
        </p-table>
        <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
            {{'NoData' | localize}}
        </div>
        <div class="primeng-paging-container">
            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                (onPageChange)="getRequirementItems($event)" [totalRecords]="primengTableHelper.totalRecordsCount">
                <!--[rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage" 没有分页-->
            </p-paginator>
            <span class="total-records-count">
                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
            </span>
        </div>
    </div>
</div>
<requirementItemEditComponent #requirementItemEditComponent (modalSave)="getRequirementItems()">
</requirementItemEditComponent>